@use "../ctr-variables.scss" as mixins;

.svc-creator-popup.sv-popup--modal-popup,
.svc-creator-popup.sv-popup--modal-overlay {
  .sv-modal-popup__button {
    border-radius: var(--ctr-button-corner-radius-small, var(--sjs-corner-radius-x075));
    padding: var(--ctr-button-padding-vertical-small, var(--sjs-spacing-x150))
      var(--ctr-button-padding-horizontal-small, var(--sjs-spacing-x4))
      var(--ctr-button-padding-vertical-small, var(--sjs-spacing-x150))
      var(--ctr-button-padding-horizontal-small, var(--sjs-spacing-x4));
    display: flex;
    flex-direction: row;
    gap: var(--ctr-button-gap, var(--sjs-spacing-x4));
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    box-shadow: var(--ctr-button-shadow-offset-x, 0px)
      var(--ctr-button-shadow-offset-y, 1px)
      var(--ctr-button-shadow-blur, 2px)
      var(--ctr-button-shadow-spread, 0px)
      var(--ctr-button-shadow-color, var(--sjs-special-shadow, #00000040));

    background: var(--ctr-button-background-color, var(--sjs-layer-1-background-500, #ffffffff));
    color: var(--ctr-button-text-color, var(--sjs-primary-background-500, #19b394ff));

    &:hover {
      background: var(--ctr-button-background-color-hovered, var(--sjs-primary-background-10, #19b3941a));
    }
    span {
      @include mixins.ctrDefaultBoldFont;

      text-align: center;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .sv-popup__button--apply {
    background: var(--ctr-button-background-color-cta, var(--sjs-primary-background-500, #19b394ff));
    color: var(--ctr-button-text-color-cta, var(--sjs-primary-foreground-100, #ffffffff));

    &:hover {
      background: var(--ctr-button-background-color-cta-hovered, var(--sjs-primary-background-400, #14a48bff));
    }
  }

  .sd-btn--danger {
    background: var(--ctr-button-background-color-danger, var(--sjs-semantic-red-background-500, #e50a3eff));
    color: var(--ctr-button-text-color-danger, var(--sjs-semantic-red-foreground-100, #ffffffff));

    &:hover {
      background: var(--ctr-button-background-color-danger-hovered, var(--sjs-semantic-red-background-500, #e50a3eff));
    }
  }
}
